<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3 col-6">
        <!-- small box  志愿者 -->
        <div class="small-box bg-info">
          <div class="inner">
            <h3>{{this.NumberOfStaff}}名</h3>
            <p>员 工</p>
          </div>
          <div class="icon">
            <i class="el-icon-user"></i>
          </div>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box 活动  -->
        <div class="small-box bg-success">
          <div class="inner">
            <h3>{{this.NumberOfHouse}}间</h3>
            <p>茶 室</p>
          </div>
          <div class="icon">
            <i class="el-icon-wind-power"></i>
          </div>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box  -->
        <div class="small-box bg-warning">
          <div class="inner">
            <h3>{{ this.order_price }}元</h3>
            <p>营业额</p>
          </div>
          <div class="icon">
            <i class="el-icon-news"></i>
          </div>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-danger">
          <div class="inner">
            <h3>{{this.NumberOfHelp}}项</h3>
            <p>报 修</p>
          </div>
          <div class="icon">
            <i class="el-icon-help"></i>
          </div>
        </div>
      </div>
      <!-- ./col -->
    </div>
    <!--  ⬆ 顶部数据展示-->
    <div class="container">
      <el-row>
        <el-col :span="14">
          <el-card shadow="hover" style="height:310px;margin-top:10px;">
              <div id="main" style="height:290px;width:100%"></div>
          </el-card>
        </el-col>
        <el-col :span="10" style="padding-left:10px;padding-top: 10px;">
          <el-card shadow="hover" style="height:310px;">
              <el-calendar v-model="value">
              </el-calendar>
          </el-card>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
//引入chars
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart, LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
export default {
  name: "Data",
  data(){
    return {
      NumberOfStaff:'',   //员工总数
      NumberOfHouse:'',       //茶室总数
      order_price:'',     //营业额任务
      NumberOfHelp:'',   //报修
    }
  },
  mounted() {
    this.getReport()
    this.init()
  },
  methods:{
    getReport() {
      this.$axios.get('/api/user/findData').then(res =>{
        if (res.data.status === 1) {
          console.log(res)
          this.NumberOfStaff = res.data.data.NumberOfStaff
          this.NumberOfHouse = res.data.data.NumberOfHouse
          this.order_price = res.data.data.order_price
          this.NumberOfHelp = res.data.data.NumberOfHelp
        } else {
          this.notice()
        }
      })
    },
    notice(){
      this.$notify({
        title: '提示',
        message: '数据统计失败，检测网络链接',
        type: 'error'
      })
    },
    //初始化chars数据渲染
    init(){
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        title: {
          show: true,
          text: '上周网站数据',
          textStyle: {
            align: 'center',
            fontSize: 20
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'line' }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['一', '二', '三', '四', '五', '六', '日']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '访问量',
            min: 0,
            max: 250,
            position: 'right',
            axisLabel: {
              formatter: '{value} 人'
            }
          },
          {
            type: 'value',
            name: '浏览量',
            min: 0,
            max: 500,
            position: 'left',
            axisLabel: {
              formatter: '{value} 次'
            }
          }
        ],
        series: [
          {
            name: '访问量',
            type: 'bar',
            yAxisIndex: 0,
            data: [6, 32, 70, 86, 68.7, 100.7, 125.6]
          },
          {
            name: '浏览量',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: [206, 300, 410, 421, 310, 413, 454]
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
/* 让日历高度改变 */
/deep/ .el-calendar-table .el-calendar-day {
  height: 30px;
  padding: 3px;
  thead {
    th {
      padding: 1px;
    }
  }
}
/deep/.el-calendar-table.current:nth-last-child(-n+2).solar{
  color: red;
}
/deep/ .el-calendar__header {
  display: flex;
  justify-content: space-between;
  padding: 5px 5px;
}

/deep/ .el-calendar__body {
  padding: 0;
}
.container-fluid {
  width: 100%;
  padding-right: 8px;
  padding-left: 8px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -7.5px;
  margin-left: -7.5px;
}
.col-lg-3 {
  -webkit-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-6 {
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 25%;
  max-width: 50%;
  position: relative;
  width: 100%;
  padding-left: 6px;
  padding-right: 6px;
}
.small-box {
  height: 100px;
  border-radius: 0.25rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
}
.small-box > .inner {
  padding: 10px;
}
.small-box h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px;
  padding: 0;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .col-xl-2 .small-box h3,
  .col-lg-2 .small-box h3,
  .col-md-2 .small-box h3 {
    font-size: 1.6rem;
  }
  .col-xl-3 .small-box h3,
  .col-lg-3 .small-box h3,
  .col-md-3 .small-box h3 {
    font-size: 1.6rem;
  }
}
.small-box p {
  font-size: 1rem;
}
.small-box p > small {
  color: #f8f9fa;
  display: block;
  font-size: .9rem;
  margin-top: 5px;
}

.small-box h3, .small-box p {
  z-index: 5;
}

.small-box .icon {
  color: rgba(0, 0, 0, 0.08);
  z-index: 0;
}
.small-box .icon > i {
  font-size: 90px;
  position: absolute;
  left: 10px;
  top: 1px;
  transition: -webkit-transform 0.3s linear;
}
/* 卡片背景颜色 */
.bg-info {
  background-color: #409EFF !important;
  color: #ffffff;
}
.bg-success {
  background-color: #67C23A !important;
  color: #ffffff;
}
.bg-warning {
  background-color: #ffc107 !important;
  color: #ffffff;
}
.bg-danger {
  background-color: #F56C6C !important;
  color: #ffffff;
}
//自定义图标
.el-icon-pets-adopt{
  background: url("../../../../src/img/pets-adopt.png") center no-repeat;
  background-size: cover;
  opacity: 0.2;
}
.el-icon-pets-adopt:before{
  content: "\e6e3";
  visibility: hidden;
}
</style>
